import Vue from 'vue'
import Component from 'vue-class-component'
import {Watch} from 'decorators'
import '../assets/css/filterStyle.css'

@Component({
  props: {
    leftIcon: String,
    rightIcon: String,
    placeholder: String,
    value: String
  }
})

export default class SearchHeadClass extends Vue {
  created() {

  }

  // @Watch('value', {immediate: true, deep: true})
  // onValueChange (value) {
  //   if (value && value.length > 0) {
  //     this.$emit('valueChange', value)
  //   }
  // }
  handleChange(value) {
    this.$emit('valueChange', value.target.value)
  }

  handleClickLeft() {
    this.$emit('clickLeft')
  }

  handleClickRight() {
    this.$emit('clickRight')
  }

  render () {
    return (
      <div class='SearchHeadViewClass'>
        <div style='margin-top:20px;width:100%;height:44px;display:flex'>
          <div class='SearchHeadViewLeftIconClass' onClick = {this.handleClickLeft}>
             {this.leftIcon ? <icon name={this.leftIcon} scale='2'/> : ''}
          </div>
          <div style='height:100%;flex:1'>
            <input style='text-align:center;border-radius:5px;margin:7px 10% 0;width: 80%;background:#f5f5f5;-webkit-appearance: none; border: 0;-webkit-box-flex: 1;flex: 1;outline: 0;line-height: 30px;font-size: inherit;' value={this.value} onChange={value => { this.handleChange(value) }} placeholder={this.placeholder} />
          </div>
          <div class='SearchHeadViewRightIconClass' onClick = {this.handleClickRight}>
            {this.rightIcon ? <icon name={this.rightIcon} scale='2'/> : ''}
          </div>
        </div>
      </div>
    )
  }
}
